<!-- 电影详细页面 -->
<template>
    <div>
        <div v-if="guodu" class="loading-div">
            <svg class="loading" viewBox="0 0 1024 1024" width="64" height="64">
                <path
                    d="M71.037275 589.62282 343.25474 771.449571 293.661553 848.937992C354.738377 888.720061 426.716444 912.090533 504.085399 912.090533 673.24879 912.090533 817.384122 802.032783 874.652978 647.070874 894.693344 592.803593 926.172549 579.587703 953.425655 587.367905 917.541154 798.956542 733.862684 960.235198 512.059733 960.235198 291.033308 960.235198 107.832701 800.106399 71.037275 589.62282ZM954.396313 443.142974 680.356997 244.277431 723.842501 171.478038C663.527271 133.726886 593.027591 111.59587 517.361022 111.59587 343.971534 111.59587 196.745027 225.775185 141.641486 385.202123 131.800502 402.718777 103.188473 416.890393 75.382838 412.395497 120.749927 212.917692 298.843376 63.884268 512.059733 63.884268 736.087733 63.884268 921.169924 228.418363 954.396313 443.142974Z">
                </path>
            </svg>
            <h3>&emsp;loading...</h3>
        </div>
        <div v-if="!guodu">
            <div class="head">
                <div class="back" @click="back">
                    <div><!--实现返回箭头--></div>
                </div>
                <div class="head-title">{{ movieMsg.name }}</div>
                <div class="back"><!--保证居中--></div>
            </div>
            <div class="msg">
                <div class="msg-img">
                    <img :src="$host + movieMsg.img" :alt="movieMsg.name" />
                </div>
                <div class="msg-content">
                    <h3 class="msg-title">{{ movieMsg.name }}</h3>
                    <div v-if="movieMsg.star != '暂无'">
                        <span v-for="index in Math.floor(parseInt(movieMsg.star) / 10)">
                            <svg viewBox="0 0 1024 1024" width="16" height="16">
                                <path
                                    d="M957.111079 403.480424c-3.927449-11.669784-14.447037-19.86442-26.723641-20.816095L647.68068 360.749204 540.183388 84.126003c-4.586458-11.803837-15.951297-19.579941-28.614711-19.579941s-24.02723 7.776104-28.614711 19.579941L375.458719 360.749204l-282.708803 21.915126c-12.276604 0.951675-22.796192 9.146311-26.723641 20.816095-3.927449 11.669784-0.50142 24.557302 8.701173 32.737612l217.547735 193.358823-67.980277 291.298436c-2.848884 12.20702 2.009773 24.919553 12.273535 32.114418 10.264784 7.195889 23.87271 7.42818 34.375925 0.586354l240.624313-156.709111 240.625336 156.709111c5.099135 3.320629 10.92891 4.974291 16.752546 4.974291 6.173606 0 12.342096-1.858324 17.623379-5.561669 10.263761-7.194866 15.122419-19.907399 12.273535-32.114418l-67.980277-291.299459L948.409906 436.218036C957.613522 428.037726 961.037505 415.150208 957.111079 403.480424z"
                                    fill="#e28c36"></path>
                            </svg>
                        </span>
                        <span v-for="index in Math.floor(parseInt(movieMsg.star) % 10 / 5)">
                            <svg viewBox="0 0 1024 1024" width="16" height="16">
                                <path
                                    d="M512 805.344L255.584 940.16a21.333333 21.333333 0 0 1-30.954667-22.485333l48.970667-285.525334L66.154667 429.930667a21.333333 21.333333 0 0 1 11.829333-36.384l286.677333-41.664 128.213334-259.776a21.333333 21.333333 0 0 1 38.250666 0l128.213334 259.776 286.677333 41.664a21.333333 21.333333 0 0 1 11.829333 36.384L750.4 632.138667l48.96 285.525333a21.333333 21.333333 0 0 1-30.944 22.485333L512 805.344z"
                                    fill="#dbdbdb">
                                </path>
                                <path
                                    d="M512 80.213333v725.130667L255.584 940.16a21.333333 21.333333 0 0 1-30.954667-22.485333l48.970667-285.525334L66.154667 429.930667a21.333333 21.333333 0 0 1 11.829333-36.384l286.677333-41.664 128.213334-259.776a21.333333 21.333333 0 0 1 19.114666-11.893334z"
                                    fill="#e28c36"></path>
                            </svg>
                        </span>
                        <span v-for="index in 5 - Math.ceil(parseInt(movieMsg.star) / 10)">
                            <svg viewBox="0 0 1024 1024" width="16" height="16">
                                <path
                                    d="M957.111079 403.480424c-3.927449-11.669784-14.447037-19.86442-26.723641-20.816095L647.68068 360.749204 540.183388 84.126003c-4.586458-11.803837-15.951297-19.579941-28.614711-19.579941s-24.02723 7.776104-28.614711 19.579941L375.458719 360.749204l-282.708803 21.915126c-12.276604 0.951675-22.796192 9.146311-26.723641 20.816095-3.927449 11.669784-0.50142 24.557302 8.701173 32.737612l217.547735 193.358823-67.980277 291.298436c-2.848884 12.20702 2.009773 24.919553 12.273535 32.114418 10.264784 7.195889 23.87271 7.42818 34.375925 0.586354l240.624313-156.709111 240.625336 156.709111c5.099135 3.320629 10.92891 4.974291 16.752546 4.974291 6.173606 0 12.342096-1.858324 17.623379-5.561669 10.263761-7.194866 15.122419-19.907399 12.273535-32.114418l-67.980277-291.299459L948.409906 436.218036C957.613522 428.037726 961.037505 415.150208 957.111079 403.480424z"
                                    fill="#dbdbdb"></path>
                            </svg>
                        </span>
                    </div>
                    <p>评分: {{ movieMsg.score == "暂无" ? "暂无评分" : movieMsg.score }}
                        {{ movieMsg.evaluatorNum == "暂无" ? "" : "(" + movieMsg.evaluatorNum + "人评分)" }}</p>
                    <p>上映时间: {{ movieMsg.release }}</p>
                    <p>类型: {{ movieMsg.type }}</p>
                    <p>制片国家/地区: {{ movieMsg.region }}</p>
                    <p>时长: {{ movieMsg.duration }}</p>
                    <p>{{ movieMsg.statue == "nowplaying" ? "正在热映" : "暂未上映" }}</p>
                </div>
            </div>
            <!-- <div class="count">
                {{movieMsg.evaluatorNum}} 人评价
            </div> -->

            <section class="msg-count">
                <div>{{ wish_count }}人想看</div>
                <div>{{ reviews_count }}人看过</div>
            </section>

            <div class=" summary">
                <h3>剧情简介:</h3>
                <p>{{ movieMsg.details }}</p>
            </div>
            <div class="performen">
                <h3>演职人员:</h3>
                <span class="star-name" v-for="item in movieMsg.director.split(' ')">
                    {{ item }}[导演]
                </span>
                <span class="star-name" v-for="item in movieMsg.actors.split('/')">
                    {{ item.replace(' ', '') }}
                </span>
                <!-- {{movieMsg.actors}} -->
            </div>
            <div class="smallcomment">
                <h3>热门短评</h3>
                <div class="one-comment" v-for="(item, index) in movieMsg.shortComment" :key="index">
                    <div class="comment-rating">
                        <span class="comment-name">{{ item.ren }}&emsp;</span>
                        <span v-if="item.rating != 'me'">
                            <span v-for="index in Math.floor(parseInt(item.rating) / 10)">
                                <svg viewBox="0 0 1024 1024" width="16" height="16">
                                    <path
                                        d="M957.111079 403.480424c-3.927449-11.669784-14.447037-19.86442-26.723641-20.816095L647.68068 360.749204 540.183388 84.126003c-4.586458-11.803837-15.951297-19.579941-28.614711-19.579941s-24.02723 7.776104-28.614711 19.579941L375.458719 360.749204l-282.708803 21.915126c-12.276604 0.951675-22.796192 9.146311-26.723641 20.816095-3.927449 11.669784-0.50142 24.557302 8.701173 32.737612l217.547735 193.358823-67.980277 291.298436c-2.848884 12.20702 2.009773 24.919553 12.273535 32.114418 10.264784 7.195889 23.87271 7.42818 34.375925 0.586354l240.624313-156.709111 240.625336 156.709111c5.099135 3.320629 10.92891 4.974291 16.752546 4.974291 6.173606 0 12.342096-1.858324 17.623379-5.561669 10.263761-7.194866 15.122419-19.907399 12.273535-32.114418l-67.980277-291.299459L948.409906 436.218036C957.613522 428.037726 961.037505 415.150208 957.111079 403.480424z"
                                        fill="#e28c36"></path>
                                </svg>
                            </span>
                            <span v-for="index in 5 - Math.ceil(parseInt(item.rating) / 10)">
                                <svg viewBox="0 0 1024 1024" width="16" height="16">
                                    <path
                                        d="M957.111079 403.480424c-3.927449-11.669784-14.447037-19.86442-26.723641-20.816095L647.68068 360.749204 540.183388 84.126003c-4.586458-11.803837-15.951297-19.579941-28.614711-19.579941s-24.02723 7.776104-28.614711 19.579941L375.458719 360.749204l-282.708803 21.915126c-12.276604 0.951675-22.796192 9.146311-26.723641 20.816095-3.927449 11.669784-0.50142 24.557302 8.701173 32.737612l217.547735 193.358823-67.980277 291.298436c-2.848884 12.20702 2.009773 24.919553 12.273535 32.114418 10.264784 7.195889 23.87271 7.42818 34.375925 0.586354l240.624313-156.709111 240.625336 156.709111c5.099135 3.320629 10.92891 4.974291 16.752546 4.974291 6.173606 0 12.342096-1.858324 17.623379-5.561669 10.263761-7.194866 15.122419-19.907399 12.273535-32.114418l-67.980277-291.299459L948.409906 436.218036C957.613522 428.037726 961.037505 415.150208 957.111079 403.480424z"
                                        fill="#dbdbdb"></path>
                                </svg>
                            </span>
                        </span>
                        <span v-if="item.rating == 'me'" class="no-rating">
                            暂未评星
                        </span>
                        <span>&emsp;&emsp;{{ item.location }}</span>
                    </div>
                    <div class="content">
                        {{ item.content }}
                    </div>

                    <!-- {{item.ren}} <br>
                    {{item.rating}} <br>
                    {{item.location}} <br>
                    {{item.content}} -->
                </div>
                <p @click="smallComment(movieMsg.name)" class="msg-all-Comment">查看全部短论</p>
                <p @click="comment(movieMsg.name)" class="msg-all-Comment">查看全部影评</p>

            </div>


        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                guodu: true,
                movieMsg: {
                    "name": "",
                    "img": "",
                    "statue": "",
                    "score": "",
                    "star": "",
                    "duration": "",
                    "release": "",
                    "type": "",
                    "region": "",
                    "director": "",
                    "actors": "",
                    "details": "",
                    "evaluatorNum": "",
                    "shortComment": [],
                },
                'wish_count': 0,
                'reviews_count': 0,
            }
        },
        components: {
        },
        mounted() {
            this.$nextTick(function () {
                const _this = this
                this.$http.get('http://localhost:8081/api/MovieMsg?name=' + this.$route.params.name)
                    .then(function (response) {
                        _this.movieMsg = response.body
                        this.guodu = false
                        _this.wish_count = _this.generateRandomNumber()
                        _this.reviews_count = _this.generateRandomThan()
                    })
                    .catch(function (response) {
                        console.log(response)
                    })
            })
        },
        methods: {
            back() {
                const that = this
                this.$router.go(-1)
            },

            generateRandomNumber() {
                return Math.floor(1000 + Math.random() * 9000);
            },

            generateRandomThan() {
                if (this.movieMsg.evaluatorNum == "暂无") {
                    return Math.floor(1000 + Math.random() * 9000);
                } else {
                    return Math.floor(parseInt(this.movieMsg.evaluatorNum) + 1 + Math.random() * 9000);
                }
            },

            smallComment(name) {
                const path = '/ShortComment/' + name
                this.$router.push({ path: path })
            },

            comment(name) {
                const path = '/LongComment/' + name
                this.$router.push({ path: path })
            }
        }
    }

</script>

<style scoped>
    .loading-div {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .loading {
        animation: spin 3s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .head {
        display: flex;
        height: 50px;
        width: 100%;
        background-color: #e54847;
        padding: 6px;
        box-sizing: border-box;
    }

    .back {
        width: 40px;
        position: relative;
        cursor: pointer;
    }

    .back div {
        position: absolute;
        top: 12px;
        left: 12px;
        height: 13px;
        width: 13px;
        border: 2px solid #fff;
        border-width: 0 0 2px 2px;
        transform: rotate(45deg);
    }

    .back div:hover {
        border: 2px solid #00c9db;
        border-width: 0 0 2px 2px;
    }

    .head-title {
        flex: 1;
        color: #fff;
        text-align: center;
        line-height: 2;
        font-size: 20px;
        overflow: hidden;
    }

    .msg {
        display: flex;
        padding: 30px;
        color: #6b6868;
        background-color: #b4b1b1;
    }

    .msg-img {

        margin: 0 40px 0 30px;
    }

    .msg-img img {
        border: 2px solid white;
    }

    .msg-content {
        margin-left: 40px;
    }

    .msg-title {
        font-size: 20px;
        color: #343232;
    }

    .msg-count {
        display: flex;
        justify-content: center;
        padding: 10px;
        background-color: #E5E9F2;
    }

    .msg-count div {
        margin-top: 20px;
        margin-right: 20px;
        margin-left: 20px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        width: 100px;
        height: 30px;
        color: white;
        border-radius: 5px;
        background-color: #e54847;
    }

    .summary {
        padding: 30px;
        font-size: 16px;
        color: #555;
        background-color: #E5E9F2;
    }

    .performen {
        padding: 30px;
        background-color: #E5E9F2;
    }

    .performen span {
        display: inline-block;
        padding: 30px;
        font-size: 16px;
        /* margin-right: 5px; */
    }

    .summary h3,
    .performen h3 {
        color: #666;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .star-name {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 2%;
    }

    .smallcomment {
        padding: 30px;
        box-sizing: border-box;
        background-color: #E5E9F2;
    }

    .smallcomment h3 {
        color: #666;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .comment-rating {
        display: flex;
        margin-top: 10px;
        margin-left: 20px;
    }

    .no-rating {
        margin: 0;
        text-align: center;
        color: #5c5c5c;
        font-size: smaller;
    }

    .comment-name {
        font-size: medium;
        text-align: center;
    }

    .one-comment {
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    }

    .content {
        margin-top: 20px;
        margin-left: 40px;
        margin-bottom: 30px;
    }

    .msg-all-Comment {
        color: #e54847;
        font-weight: lighter;
        text-align: center;
        font-size: 15px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #d6d3d3;
    }
</style>